<template>
  <div>
    <current-location>
      <router-link to="/news" tag="span">
        新闻资讯
      </router-link>
      / {{ newsInfo.title }}</current-location
    >
    <div class="page-container">
      <div class="tartan-container" style="margin-top:0">
        <div class="app-container">
          <h2 style="text-align:center;color:#004e7e">{{ newsInfo.title }}</h2>
          <p style="text-align:center">来源: 原创 发布时间: 2021-08-19</p>
          <div class="tartan-quil ql-editor" v-html="newsInfo.detail"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CurrentLocation from "../../components/CurrentLocation.vue";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import { mapState } from "vuex";
export default {
  name: "newsdetail",
  components: { CurrentLocation },
  asyncData({ store, route }) {
    const messageId = route.params.id;
    return store.dispatch("GET_NEWS_INFO", { messageId });
  },
  computed: {
    ...mapState(["newsInfo"]),
  },

  data() {
    return {};
  },
  mounted() {
    console.log(this.newsInfo);
  },
};
</script>
<style lang="scss">
.tartan-quil.ql-editor img {
  width: 80%;
}
.tartan-quil.ql-editor p {
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  color: #50565b;
  padding: 10px 0;
}
</style>
